<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 用于指定双核浏览器默认以何种方式渲染页面 -->
    <meta name="renderer" content="webkit">
    <!-- 为移动设备添加 viewport；-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 指定请求和响应遵循的缓存机制 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>高考志愿卡</title>
    <link rel="shortcut icon" href="../mobile/assets/icon.ico" type="image/vnd.microsoft.icon"/>
    <link rel="stylesheet" href="../mobile/assets/css/base.css">
    <link rel="stylesheet" href="../mobile/assets/css/payresult.css?v=16">
</head>
<body>
<div class="paySuccess">
    <img src="../mobile/assets/img/paySuccess.png" alt="支付成功" class="statusI">
    <p class="payStatusText">订单支付成功!</p>
    <div class="orderInform">
        <p>
            <span class="left">订单编号</span>
            <span class="right orderId"></span>
        </p>
        <p>
            <span class="left">实付金额</span>
            <span class="right redText"><span class="price">0.00</span>元</span>
        </p>
        <p>
            <span class="left">支付方式</span>
            <span class="right payType">微信支付</span>
        </p>
    </div>
    <div class="buttons">
        <div class="queryOrder">查看订单</div>
        <div class="submitOrder">再来一单</div>
    </div>
</div>
<div class="payFail">
    <img src="../mobile/assets/img/payFail.png" alt="支付失败" class="statusI">
    <p class="payStatusText">订单支付失败!</p>
    <p class="failText">哎呀，貌似出了点小问题...</p>
    <div class="buttons">
        <div class="backPay">重新支付</div>
        <div class="toHome">返回首页</div>
    </div>
</div>
<script src="../mobile/assets/js/jquery.min.js"></script>
<script src="../mobile/assets/js/message.js"></script>
<script src="../mobile/assets/js/common.js?v=1"></script>
<script>
    if(getQueryVariable('price')) {
        localStorage.setItem('orderId', getQueryVariable('oid'))
        $('.orderId').text(getQueryVariable('oid'))
        $('.price').text(getQueryVariable('price'))
        $('.payType').text(getQueryVariable('payType')=='alipayWap' || getQueryVariable('payType')=='alipayScan'? '支付宝支付' : '微信支付')
        toast({msg:"3秒后自动跳转至查看订单,若无反应可点击查看订单按钮!", time:3000});
        setTimeout(() => {
            window.location.href = './query.html?oid=' + $(".orderId").text()
        },3000)
    }else {
        $('.payFail').show()
        $('.paySuccess').hide()
    }

    $(".queryOrder").on('click',function (){
        window.location.href = './query.html?oid=' + $(".orderId").text()
    })
    $(".submitOrder").on('click',function (){
        window.location.href = './'
    })
    $(".backPay").on('click',function (){
        window.location.href = './pay.html?commitId=' + getQueryVariable('commitId')
    })
    $(".toHome").on('click',function (){
        window.location.href = './'
    })
</script>
</body>
</html>